<template>
	<view class="signList">
		<z-paging ref="paging" :refresher-out-rate="0.8" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" safe-area-inset-bottom
			empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
			empty-view-text="暂无内容" :refresher-status.sync="refresherStatus" auto-scroll-to-top-when-reload
			v-model="dataList" @query="queryList">
			<!-- 到期时间 -->
			<view class="maturityTime">
				<view class="maturityTime_top">
					<view class="maturityTime_top_left"></view>
					<view class="maturityTime_top_t">当前权益卡有效期限还剩</view>
					<view class="maturityTime_top_right"></view>
				</view>
				<view class="maturityTime_bottom">
					<view class="maturityTime_bottom_bg">
						<view class="maturityTime_bottom_bg_num">{{yearNum}}</view>
						<view class="maturityTime_bottom_bg_year">年</view>
					</view>
					<view class="maturityTime_bottom_bg">
						<view class="maturityTime_bottom_bg_num">{{dayNum}}</view>
						<view class="maturityTime_bottom_bg_year">天</view>
					</view>
				</view>
			</view>
			<!-- 待领取列表 -->
			<view class="receive">
				<view class="title">
					<view class="title_bg"></view>
					<view class="title_t">待使用权益</view>
				</view>
				<view class="list">
					<view class="details" v-for="(item, index) in noReceiveList" :key="index"
						@click="to_cardDetail(item.id,item.code)">
						<view style="width: 100%; height: 5rem; position: absolute">
							<img style="width: 100%; height: 5rem"
								src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/13bb012ebbbb4856949b6afe56a5d3b4.png"
								alt="" onclick="return false" />
						</view>
						<img class="details_img" :src="item.pictureUrl" alt="" />
						<view class="details_t no_details_t">{{ item.name }}</view>
						<van-icon name="arrow" size="20" color="#fff" bold />
					</view>
				</view>
				<view class="no_list" v-if="!noReceiveList.length">
					<img class="no_list_img"
						src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/c19899b901d44af4a8de02e69bdbd526.png"
						alt="" />
					<view>全部权益已使用</view>
				</view>
			</view>
			<!-- 已领取列表 -->
			<view class="received">
				<view class="title">
					<view class="title_bg"></view>
					<view class="title_t">已使用权益</view>
				</view>
				<view class="list">
					<view class="details" v-for="(item, index) in receiveList" :key="index"
						@click="to_reportQuery(item.id,item.code)">
						<view style="width: 100%; height: 5rem; position: absolute">
							<img style="width: 100%; height: 5rem"
								src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/34d2ff80267b4811b9339470d7afb81f.png"
								alt="" onclick="return false" />
						</view>

						<img class="details_img" :src="item.pictureUrl" alt="" />
						<view class="details_t">{{ item.name }}</view>
						<van-icon name="arrow" size="20" color="#fff" bold />
					</view>
				</view>
				<view class="no_listed" v-if="!receiveList.length">
					<img class="no_list_img"
						src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/0a7dac16a5734e269148fe7a749b0243.png"
						alt="" />
					<view>尚未使用权益</view>
				</view>
				<view class="phoneLine">客服热线：400-8596598</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		cardDetailByuser
	} from "@/api/salesmanMeeting.js";
	export default {
		data() {
			return {
				receiveList: [],
				noReceiveList: [],
				nowTime: '',
				yearNum: '',
				dayNum: ''
			};
		},
		onLoad(options) {
			this.maturityTime = options.maturityTime
			this.cardNum = options.cardNum;
			this.restTime()
		},

		methods: {
			restTime() {
				this.nowTime = new Date();
				this.days = this.$moment(this.maturityTime).diff(this.$moment(this.nowTime), 'day')
				this.dayNum = this.days % 365; //3
				this.yearNum = (this.days - this.dayNum) / 365
			},
			queryList(pageNo, pageSize) {
				cardDetailByuser(this.cardNum)
					.then((res) => {
						this.receiveList = res.data.receivedEquityInfoList;
						this.noReceiveList = res.data.noReceivedEquityInfoList;
					})
					.catch(() => {
						this.$refs.paging.complete(false);
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.signList {
		::v-deep.u-line {
			height: auto !important;
		}

		position: relative;
		height: 100%;
		width: 100%;
		background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/09/19/eae21b0780554e87958d1682d1c38872.png");
		background-repeat: no-repeat;
		background-size: 100% 276px;
		box-sizing: border-box;
	}

	.maturityTime {
		padding-top: 1.25rem;
		color: #FFFFFF;
	}

	.maturityTime_top {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.maturityTime_top_left {
		width: 1.4375rem;
		height: 0.0625rem;
		background: linear-gradient(270deg, #FFF5D4 0%, rgba(216, 216, 216, 0) 100%);
	}

	.maturityTime_top_t {
		font-size: 1rem;
		color: #FFF5D4;
		margin: 0 0.25rem;
	}

	.maturityTime_top_right {
		width: 1.4375rem;
		height: 0.0625rem;
		background: linear-gradient(90deg, #FFF5D4 0%, rgba(216, 216, 216, 0) 100%);
	}

	.maturityTime_bottom {
		margin-top: 0.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.maturityTime_bottom_bg {
		width: 6rem;
		height: 6rem;
		background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/0e604d460a854562b55c397deea5fde1.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
	}

	.maturityTime_bottom_bg_num {
		margin-top: 1.2rem;
		font-size: 28px;
	}

	.maturityTime_bottom_bg_year {
		font-size: 28rpx;
		color: #FFE8A4;
	}

	.receive {
		padding: 0.625rem 1rem 0;
	}

	.received {
		padding: 0.3125rem 1rem 0;
	}

	.title {
		display: flex;
		align-items: center;
	}

	.title_bg {
		width: 0.25rem;
		height: 1.125rem;
		background: #ff8a00;
		border-radius: 1.125rem;
	}

	.title_t {
		height: 1.125rem;
		margin-left: 0.5rem;
		font-size: 1.125rem;
		font-weight: blod;
		color: #333333;
		margin-top: -0.3125rem;
	}

	.list {
		padding: 0.875rem 0.5625rem 0rem;
	}

	.details {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 5rem;
		background: linear-gradient(90deg, #fef4e8 0%, #ffeedd 50%, #fde8d1 100%);
		border-radius: 0.625rem;
		margin-bottom: 0.875rem;
	}

	.details_img {
		z-index: 2;
		width: 4.25rem;
		height: 4.25rem;
		/* margin-left: 1.125rem; */
	}

	.details_t {
		width: 200px;
		z-index: 2;
		font-size: 1rem;
		font-weight: bold;
		color: #77370f;
		margin: 0 .625rem;
	}

	.no_details_t {
		color: #7294e1;
	}

	.phoneLine {
		padding: 1.4375rem 0rem 2.5rem;
		display: flex;
		justify-content: center;
		font-size: 1.125rem;
		/* font-weight: bold; */
		color: #ecaf65;
	}

	.no_list {
		margin: 0.75rem auto;
		font-size: 0.75rem;
		font-weight: bold;
		color: #ff8a00;
		text-align: center;
	}

	.no_listed {
		margin: 0.75rem auto;
		font-size: 0.75rem;
		font-weight: bold;
		color: #999999;
		text-align: center;
	}

	.no_list_img {
		width: 10.625rem;
		height: 4.375rem;
	}
</style>